The empty state is the product

The screenshot on the marketing site has forty rows in it. The screen every new person actually sees has zero. We design the first one for months and the second one in the last week, usually as a centred illustration and the sentence "No items yet."

That sentence is doing no work. The person can see there are no items. What they cannot see is what an item is, why they would want one, or what happens after they make it.

Three empty states, not one

They get collapsed into a single component constantly, and they need completely different things.

• First run. The person has never used this. This screen is onboarding whether you meant it to be or not. It should show what a filled state looks like, and give exactly one way in.
• Cleared out. They had items and finished them. This is a good outcome. Say so, briefly, and get out of the way.
• Nothing matched. A search or filter returned nothing. This is the only one that is a dead end, and the only one that must offer a way back — which filter to loosen, or a button to clear them all.

Seed it

The strongest version of a first-run state I have shipped was not a state at all. It was one real, pre-made example row, marked as an example, which the person could open, edit, or delete. Activation went up by a third. Nobody read the copy we had agonised over, because they did not need to — the thing was right there, and it was obviously a thing you could touch.

An example beats an explanation, and a deletable example beats both.

The test

Delete your account's data and open the app. Not a screenshot of it, not a Storybook entry — the actual app, in the actual browser, with nothing in it. Then ask whether you would know what to do next if you had not built it.

I do this once a quarter and it is uncomfortable every time.